<!--
 * @Author: Tim
 * @Date: 2020-08-26 10:50:11
 * @LastEditTime: 2020-08-27 09:35:58
 * @LastEditors: Please set LastEditors
 * @Description: 输入框 && 自带删除功能
 * @FilePath: /afire/components/af_input/index.vue
-->
<template>
    <view class="af-flex-row input-wrap" :style="getStyl">
        <view class="af-flex-1 input-inner-wrap">
            <input class="ipt" data-id="inputId" @input="onInput" @focus="onFocus" @blur="onBlur" :maxlength="maxlength"
                @confirm="onConfirm" :placeholder-class="placeholderClass" :placeholder="placeholder"
                :password="password" :value="iptVal" :type="type" :disabled="isDisabled" />
        </view>
        <view class="af-flex-row af-x-center del-wrap" @tap.stop="onDel" v-if="iptVal.length > 0">
            <image class="del-ico" :src="deleteIcon" />
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            ///是否禁用input
            isDisabled: Boolean,

            fontSize: {
                type: Number,
                default: 30
            },

            color: {
                type: String,
                default: '#14121E'
            },

            height: {
                type: Number,
                default: 60
            },

            borderColor: {
                type: String,
                default: '#E3E9F3'
            },

            borderRadius: {
                type: Number,
                default: 6
            },

            maxlength: {
                type: Number,
                default: 140
            },

            placeholderClass: String,

            placeholder: String,

            value: String,

            type: {
                type: String,
                default: 'text'
            },

            password: Boolean
        },

        computed: {
            getStyl() {
                let sty = `height:${this.height}rpx;`;
                if (this.borderColor != 'none') sty += `border: 1px solid ${this.borderColor};`;
                if (this.borderRadius > 0) sty += `border-radius: ${this.borderRadius}rpx;`;
                if (this.fontSize > 0) sty += `font-size:${this.fontSize}rpx;`;
                if (!this.color) styl += `color:${this.color};`;
                return sty;
            }
        },

        data() {
            return {
                //默认的值
                iptVal: '',

                deleteIcon: '',
            }
        },

        created() {
            this.iptVal = this.value;
            if (this.iptVal.length > 0) this.flag = true;
        },

        methods: {
            onInput(e) {
                let {
                    value
                } = e.detail;

                ///同步数据
                this.iptVal = value;

                this.$emit("input", value);
            },

            onFocus(e) {
                this.$emit("focus", e);
            },

            onBlur(e) {
                let {
                    value
                } = e.detail;

                this.$emit("blur", value);
            },

            onConfirm(e) {
                this.$emit("confirm", e);
            },

            ///删除按钮
            onDel() {
                this.iptVal = "";

                this.$emit("clear");
            }
        }
    }
</script>

<style lang="scss" scoped>
    .input-wrap {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
    }

    .input-inner-wrap {
        padding-left: 20upx;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .ipt {
        width: 100%;
        height: 100%;
    }

    .right-arrow {
        padding-right: 22upx;
    }

    .arrow-ico {
        width: 11upx;
        height: 18upx;
    }

    .del-wrap {
        width: 68upx;
        height: 100%;

        .del-ico {
            width: 28upx;
            height: 28upx;
        }
    }
</style>